<template>
  <div class="m-container">
    <!-- 页面头部 start -->
    <div class="m-page-header">
      <div class="m-header__wrap">
        <div class="m-header__avatar" @click="goToLogin">
          <img src="~_a/img/logo.png" alt="头像" />
        </div>
        <div class="m-header__info-group g-ml--10">
          <div class="m-header__info">
            <p class="m-header__info__nickname" @click="goToLogin">
              {{ realname }}
            </p>
            <div v-if="is_agent === 1" class="m-header__info__grade">
              <i class="iconfont icon-huangguan"></i>
              <p class="g-ml--5">董事</p>
            </div>
          </div>
          <div class="m-header__info-text">
            <p>会员编号：{{ number || "暂无" }}</p>
            <p>上级编号：{{ parent_number || "暂无" }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 页面头部 end -->
    <!-- 余额 start -->
    <div class="m-card m-card--balance">
      <div class="m-balance__header">
        <div class="m-balance__header__item">
          <p class="m-balance__title">余额 ￥{{ balance }}</p>
          <p class="m-balance__sub">每月1号结算联创奖励</p>
        </div>
        <div class="m-balance__header__item">
          <van-button @click="goToWithdrawal" type="primary" size="small"
            >立即提现</van-button
          >
        </div>
      </div>
      <div class="m-balance__body">
        <div class="m-balance__item m-balance__item--body">
          <p class="g-fs--14">￥{{ month_total_amount }}</p>
          <p class="g-fs--12 g-c--gray">本月收益</p>
        </div>
        <div class="m-balance__item m-balance__item--body">
          <p class="g-fs--14">￥{{ today_total_amount }}</p>
          <p class="g-fs--12 g-c--gray">今日收益</p>
        </div>
      </div>
      <div class="m-balance__footer">
        <div class="m-balance__item">
          <p class="g-fs--12 g-c--gray">
            上月业绩
            <span class="g-c--dark-yellow"
              >￥{{ last_month_order_amount }}</span
            >
          </p>
        </div>
        <div class="m-balance__item">
          <p class="g-fs--12 g-c--gray">
            累计业绩
            <span class="g-c--dark-yellow">￥{{ total_order_amount }}</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 余额 end -->
    <!-- 我的订单 start -->
    <div class="m-card m-card--order g-mb--10">
      <a href="javascript:;" class="m-card__header">
        <h2 class="m-card__header__title">我的订单</h2>
        <div @click="goToMyOrders" :data-type="0" class="m-card__header__link">
          <span class="g-fs--12 g-c--gray g-mr--5">查看所有订单</span>
          <van-icon size="16px" color="#999" name="arrow" />
        </div>
      </a>
      <div class="m-order__body">
        <van-row type="flex">
          <van-col span="8">
            <div
              @click="goToMyOrders"
              :data-type="0"
              class="m-order__body__item"
            >
              <i class="iconfont icon-daifukuan"></i>
              <p class="g-c--gray g-fs--12">待付款</p>
            </div>
          </van-col>
          <van-col span="8">
            <div
              @click="goToMyOrders"
              :data-type="1"
              class="m-order__body__item"
            >
              <i class="iconfont icon-daifahuo"></i>
              <p class="g-c--gray g-fs--12">待发货</p>
            </div>
          </van-col>
          <van-col span="8">
            <div
              @click="goToMyOrders"
              :data-type="2"
              class="m-order__body__item"
            >
              <i class="iconfont icon-yifahuo"></i>
              <p class="g-c--gray g-fs--12">已发货</p>
            </div>
          </van-col>
        </van-row>
        <div class="m-order__new" v-if="last_order">
          <div class="m-order__new__header">
            <p class="g-fs--12 g-c--gray">最新订单情况</p>
            <p class="g-fs--12 g-c--gray">{{ last_order.delivered_time }}</p>
          </div>
          <div class="m-order__new__body">
            <div class="m-order__new__cover g-mr--10">
              <img src="~_a/img/logo.png" alt="" />
            </div>
            <div class="m-order__new__content">
              <p class="m-order__new-status">
                <van-icon color="#b7202b" size="18px" name="passed"></van-icon>
                <span v-if="last_order.status === 'created'" class="g-ml--5"
                  >待付款</span
                >
                <span v-if="last_order.status === 'delivered'" class="g-ml--5"
                  >已付款</span
                >
                <span v-if="last_order.status === 'paid'" class="g-ml--5"
                  >已发货</span
                >
                <span v-if="last_order.status === 'received'" class="g-ml--5"
                  >已收货</span
                >
              </p>
              <p class="g-fs--12 g-c--gray">
                订单号：{{ last_order.order_sn }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 我的订单 end -->
    <!-- 我的资料 start -->
    <div class="m-card m-card--p-0 m-card--o-h m-card--column">
      <van-cell title="我的资料" is-link to="/user_center/user_info" />
      <!-- <van-cell title="绑定手机"
                is-link
                to="/user_center/update_mobile" /> -->
      <van-cell title="联创中心" is-link to="/business" />
      <van-cell title="余额明细" is-link to="/user_center/balance_details" />
    </div>
    <!-- 我的资料 end -->
  </div>
</template>

<script>
import { Button, Row, Col, Icon, Cell } from "vant";
import { userModel } from "@/api";
import { mapState } from "vuex";
import Tool from "@/lib/tool";
const tool = new Tool();
export default {
  name: "user_center",
  components: {
    "van-button": Button,
    "van-row": Row,
    "van-col": Col,
    "van-icon": Icon,
    "van-cell": Cell
  },
  data() {
    return {
      avatar: "",
      balance: "", //余额
      // is_agent: "0",
      last_month_order_amount: 0, //上月业绩
      last_order: [],
      month_total_amount: 0, //本月总代收益
      number: "",
      parent_id: "0",
      realname: "",
      today_total_amount: 0, //今日总代收益
      total_order_amount: 0, //累计业绩
      user_id: "1"
    };
  },
  computed: {
    ...mapState({
      parent_number: state =>
        (state.userInfo && state.userInfo.parent_number) || "",
      bank: state => (state.userInfo && state.userInfo.bank) || "",
      bankcard: state => (state.userInfo && state.userInfo.bankcard) || "",
      id_card: state => (state.userInfo && state.userInfo.id_card) || "",
      mobile: state => (state.userInfo && state.userInfo.mobile) || "",
      is_agent: state => (state.userInfo && state.userInfo.is_agent) || "",
      // realname: state => state.userInfo.realname,
      receiver_address: state =>
        (state.userInfo && state.userInfo.receiver_address) || "",
      receiver_area_name: state =>
        (state.userInfo && state.userInfo.receiver_area_name) || ""
    })
  },
  mounted() {
    this.getUserCenterInfo();
  },
  methods: {
    getUserCenterInfo() {
      userModel._getUserCenterInfo().then(res => {
        this.avatar = res.avatar;
        this.balance = res.balance;
        this.last_month_order_amount = res.last_month_order_amount;
        this.last_order = res.last_order;
        this.month_total_amount = res.month_total_amount;
        this.number = res.number;
        this.parent_id = res.parent_id;
        this.realname = res.realname;
        this.today_total_amount = res.today_total_amount;
        this.total_order_amount = res.total_order_amount;
        this.user_id = res.user_id;
        if (this.last_order) {
          this.last_order.created_time = tool.formatTime(
            this.last_order.created_time
          );
          this.last_order.delivered_time = tool.formatTime(
            this.last_order.delivered_time
          );
        }
      });
    },
    goToWithdrawal() {
      this.$router.push({
        name: "withdrawal"
      });
    },
    goToMyOrders(event) {
      /* 直接在控制台查看event，currentTarget永远是null，必须直接把currentTarget打印出来。 */
      const type = event.currentTarget.getAttribute("data-type");
      this.$router.push({
        name: "my_orders",
        params: {
          type
        }
      });
    },
    goToLogin() {
      this.$router.push({
        name: "login"
      });
    }
  }
};
</script>

<style lang="scss">
.m-header__avatar {
  height: 62px;
  width: 62px;
  overflow: hidden;
  border-radius: 31px;
  background-color: #fff;
  padding: 5px;
  img {
    width: 100%;
    height: 100%;
  }
}
.m-header__wrap {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.m-header__info-group {
  display: flex;
  flex-direction: column;
}
.m-header__info-text {
  color: rgba(255, 255, 255, 0.6);
  p {
    display: inline;
    font-size: 12px;
    margin-right: 5px;
  }
}
.m-card--balance,
.m-card--order {
  flex-direction: column;
  margin-top: -55px;
  padding: 0;
  overflow: hidden;
  & > div {
    flex: 0 0 auto;
  }
}
.m-balance__header {
  width: 100%;
  background-color: #333333;
  height: 55px;
  padding: 10px 10px 0;
  display: flex;
  justify-content: space-between;
}
.m-balance__header__item {
  & > p {
    font-size: 16px;
  }
  .m-balance__title {
    color: #f4c885;
  }
  .m-balance__sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
  }
}
.m-balance__body,
.m-balance__footer {
  display: flex;
}
.m-balance__item {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  height: 40px;
  @at-root .m-balance__body & {
    height: 70px;
  }
  @at-root .m-balance__footer & {
    border-top: 1px solid #eeeeee;
  }
}
.m-balance__item--body:first-child {
  border-right: 1px solid #eeeeee;
}
.m-card--order {
  margin: 0;
}

.m-order__body {
  padding: 10px;
}
.m-order__body__item {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  & > .iconfont {
    font-size: 28px;
    color: #b7202b;
    margin-bottom: 3px;
  }
}
.m-order__new {
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 10px;
}
.m-order__new__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.m-order__new__body {
  display: flex;
  align-items: center;
}
.m-order__new__cover {
  width: 36px;
  height: 36px;
  background-color: #fff;
  img {
    width: 100%;
    height: 100%;
  }
}
.m-order__new-status {
  font-size: 14px;
  color: #b7202b;
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}
</style>
